<template>
  <div class="home">
    <!-- http://mp.huoshansxy.com/?clickid=11111#/home?channel=tt&reffer=3002170&sid=11047&bid=3510520 -->
    <ul class="div_form">
      <li>
        <input type="text" v-model="form.phone" />
      </li>
      <li>
        <input type="text" v-model="form.code" />
        <button @click="sendCode()">发送验证码</button>
      </li>
      <li>
        <button @click="agreeClick()">立即报名</button>
        <About :traceId="traceId"></About>
        <div>state:a:{{ a }}</div>
        <button @click="a_add">+10</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { get, post } from "../api/axios";
import store from "../store";
import { getHeadersParams } from "@/assets/utils";
import {
  enter_loadH5,
  event_callback,
  queryOrder,
  getPhoneCode,
  queryCode,
  getSubmitForm,
  wxPay,
} from "@/assets/weibo";

// import { sensors } from "../api/sensors";
import {
  aesDecrypt,
  aesEncrypt,
  getSign,
  getBaseUrl,
  getBizType,
} from "../assets/utils";
import About from "./AboutView.vue";
import { mapState } from "vuex";
export default {
  name: "HomeView",
  components: {
    About,
  },
  data() {
    return {
      bizType: "",
      form: {
        phone: "18437754407",
        code: "123456",
      },
      traceId: "",
      sensorsField: null,
    };
  },
  computed: {
    ...mapState(["bid", "a"]),
    orderQuery() {
      return this.$route.query.return == "true" ? true : false;
    },
    aesPhone() {
      return aesDecrypt(this.$route.query.phone);
    },
  },
  async created() {
    // 获取业务类型
    this.bizType = await getBizType(this.$route.query.bid);

    this.$store.commit("add", this.$route.query.bid);
    window.localStorage.setItem("bid", this.$route.query.bid);
    // 获取并存储链接信息
    this.init();
    // 进入h5落地页
    await this.getPageInfo();
    await this.getQueryOrder();
    // 神策字段
    this.sensorsField = {
      reffer: store.state.pageInfo.reffer,
      channel: store.state.pageInfo.channel,
      sid: store.state.pageInfo.sid,
      bid: store.state.pageInfo.bid,
    };

    
  },
  mounted() {},
  methods: {
    a_add() {
      this.$store.commit("a_add", 10);
    },
    // 获取并存储链接信息
    init() {
      const url = new URL(window.location.href);
      const searchParams = url.searchParams;
      let clickid = searchParams.get(
        this.getChannelDate(this.$route.query.channel)
      );
      window.localStorage.setItem(
        "pageInfo",
        JSON.stringify(
          Object.assign(this.$route.query, { clickid, traceId: this.traceId })
        )
      );
      this.$store.commit("add", Object.assign(this.$route.query, { clickid }));
    },

    // 获取媒体简称
    getChannelDate(data) {
      const channelDateMap = new Map([
        ["tt", "clickid"],
        ["bd", "bd_vid"],
        ["360", "qhclickid"],
        ["ks", "callback"],
        ["bz", "track_id"],
        ["uc", "uctrackid"],
        ["gdt", "qz_gdt"],
      ]);
      return channelDateMap.get(data);
    },
    // 进入h5落地页
    async getPageInfo() {
      let params = {
        reffer: store.state.pageInfo.reffer,
        channel: store.state.pageInfo.channel,
        sid: store.state.pageInfo.sid,
        bid: store.state.pageInfo.bid,
        mtraceId: store.state.pageInfo.clickid,
      };
      let headers = {
        "Content-Type": "application/json",
        serverId: getHeadersParams(this.bizType).serverId,
        sign: getSign(params, this),
      };
      const res = await enter_loadH5(this.bizType, params, headers);
      console.log(res);
      this.traceId = res.data.traceId;
      console.log(this.traceId);
      this.callbackFun("in_landing_page");
    },
    // 通用回传
    async callbackFun(event) {
      let params = {
        eventType: event,
        reffer: store.state.pageInfo.reffer,
        sid: store.state.pageInfo.sid,
        bid: store.state.pageInfo.bid,
        traceId: this.traceId,
      };
      let headers = {
        "Content-Type": "application/json",
        serverId: getHeadersParams(this.bizType).serverId,
        sign: getSign(params, this),
      };
      const res2 = await event_callback(this.bizType, params, headers);
      // sensors("in_landing_page",this.sensorsField);
      console.log(res2);
    },
    // 订单查询
    async getQueryOrder() {
      if (this.orderQuery == true) {
        alert("查询订单结果");
        let params = {
          merchantCode: "1001",
          serverId: getHeadersParams(this.bizType).serverId,
          // phone: this.aesPhone,
          phone: "18437754407",
          productNo: "test001",
          channel: store.state.pageInfo.channel,
        };
        console.log("params");
        console.log(params);
        let headers = {
          serverId: getHeadersParams(this.bizType).serverId,
          sign: getSign(params, this),
        };
        const res = await queryOrder(this.bizType, params, headers);
        console.log(res);
        if (res.data) {
          // 通用回传+神策统计
          this.callbackFun("pay_success");
          alert("已支付，跳转到小程序");
        } else {
          alert(res.msg);
        }
      }
    },
    // 发送验证码
    sendCode() {
      alert("发送验证码");
      let params = {
        phone: aesEncrypt(this.form.phone),
        templateCode: "001",
        channel: "crm",
        caller: "10011218",
      };
      let headers = {
        "Content-Type": "application/json",
        serverId: getHeadersParams(this.bizType).serverId,
        sign: getSign(params, this),
      };
      const res = getPhoneCode(this.bizType, params, headers);
      console.log(res);
      // 通用回传+神策统计
      this.callbackFun("captcha");
      // sensors("captcha",this.sensorsField);
    },
    // 表单验证
    async agreeClick() {
      let params = {
        phone: aesEncrypt(this.form.phone),
        code: this.form.code,
      };
      let headers = {
        "Content-Type": "application/json",
        serverId: getHeadersParams(this.bizType).serverId,
        sign: getSign(params, this),
      };
      const res = await queryCode(this.bizType, params, headers);
      console.log(res);
      if (res.data == false) {
        alert("验证码错误");
        let params = {
          mediaId: 1,
          reffer: store.state.pageInfo.reffer,
          channel: store.state.pageInfo.channel,
          bid: store.state.pageInfo.bid,
          sid: store.state.pageInfo.sid,
          mtraceId: store.state.pageInfo.clickid,
          traceId: this.traceId,
          phone: aesEncrypt(this.form.phone),
          pageUrl: window.location.href,
        };
        let headers = {
          "Content-Type": "application/json",
          serverId: getHeadersParams(this.bizType).serverId,
          sign: getSign(params, this),
        };
        // h5手机号表单提交
        const result = await getSubmitForm(this.bizType, params, headers);
        console.log(result);

        // 通用回传+神策统计
        this.callbackFun("submit_phone");
        // sensors("submit_phone",this.sensorsField);
        // 发起支付
        let params1 = {
          merchantCode: "1001",
          serverId: getHeadersParams(this.bizType).serverId,
          platformNo: "wechat",
          phone: this.form.phone,
          productNo: "test002",
          productTitle: "test002",
          returnUrl: encodeURIComponent(
            window.location.href +
              `&phone=${aesEncrypt(this.form.phone)}&return=true`
          ),
          amount: 1,
          channel: store.state.pageInfo.channel,
          extZxbm: store.state.pageInfo.channel,
        };
        let hea = {
          "Content-Type": "application/json",
        };
        const res3 = await wxPay(this.bizType, params1, hea);

        console.log(res3);
        let url = res.data.h5Url;
        window.location.href = url;
      } else if (res.data.data == true) {
        alert("验证码通过");
      }
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  color: red;
  font-size: 50px;
}
.home {
  width: 100%;
  height: 5010px;
  background: url(../assets/bg.png) no-repeat;
  background-size: 100% 100%;
  .div_form {
    position: absolute;
    top: 1000px;
    width: 100%;
    height: 200px;
    input {
      height: 50px;
      width: 50%;
    }
  }
}
</style>
